<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title><?php echo $config['title']; ?></title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		*{box-sizing:border-box;margin:0;padding:0;list-style:none;font:.8125rem/1.5 微软雅黑,Verdana,Helvetica,Arial,sans-serif;-box-sizing:border-box;}
		body,html{overflow:hidden;height:100%;}
		body{background:#00ffff;background-size:cover; display: flex; justify-content: center; align-items: center;}
		.main{box-sizing:border-box;padding:18px;width:100%;max-width:680px;height:540px;border-radius:4px;background-color:#fff;}
		.title{text-align:left;}
		.title h1{font-size:1.5rem;}
		.title p{font-size:1rem;}
		input[type=email],input[type=password],input[type=text]{padding:0 8px;width:100%;height:46px;outline:0;border:1px solid #dcdee0;border-radius:3px;color:#555;vertical-align:middle;font-size:.875rem;}
		input[type=email]:focus,input[type=password]:focus,input[type=text]:focus{border:1px solid #27a9e3;}
		input[type=button],input[type=submit]{display:inline-block;margin:0;padding:9pt 24px;width:100%;outline:0;border:none;border-radius:3px;background-color:#27a9e3;color:#fff;vertical-align:middle;text-align:center;white-space:nowrap;font-size:1.125rem;line-height:1.5rem;cursor:pointer;-webkit-appearance:none;}
		hr.hr10,hr.hr20{margin:0;padding:0;width:100%;border:none;}
		hr.hr10{height:10px;}
		hr.hr20{height: 20px;}
		.verify-row{position:relative;overflow:hidden; max-width: 320px;}
        .verify-row .verify-img{position:absolute;top:1px;right:1px;}
        textarea{width: 100%; outline: none; resize:none; padding:8px; border:1px solid #dcdee0; border-radius:3px; color:#555;}
        textarea:focus{border:1px solid #27a9e3;}
	</style>
</head>

<body>
	<div class="main">
		<div class="title">
			<h1>留言咨询</h1>
			<p>请留言您的需求，我们将依据您的需求，由专业客服于3天内为您服务。</p>
		</div>
		<hr class="hr20">
		<form id="loginForm" action="" method="POST">
			<input style="max-width: 320px;" name="username" required oninvalid="setCustomValidity('请输入姓名');" oninput="setCustomValidity('');" placeholder="姓名" type="text">
			<hr class="hr10">
			<input style="max-width: 320px;" name="moble" placeholder="联系电话" type="text">
			<hr class="hr10">
			<input style="max-width: 320px;" name="email" placeholder="邮箱" type="email">
			<!-- <hr class="hr10"> -->
			<!-- <input style="max-width: 320px;" name="qq" placeholder="QQ" type="text"> -->
			<hr class="hr10">
			<textarea name="content" rows="8" placeholder="留言信息"></textarea>
			<hr class="hr10">
			<div class="verify-row">
				<input name="captcha" required maxlength="4" placeholder="验证码" type="text" autocomplete="off">
				<div class="verify-img">
					<img src="<?php echo $container->url->build('/chat/client/captcha'); ?>" onclick="recode()" id="verify-img" width="128" height="44" alt="captcha" />
				</div>
			</div>
			<hr class="hr10">
			<input value="马上留言" style="width:100%;" type="submit">
		</form>
	</div>

	<script src="<?php echo $this->assets('/static/libs/layui/layui.js', ['v' => 20210407]);?>"></script>
	<script>
		var loading = false;
		window.onload = function () {
			layui.use(['layer'], function (layer) {
				var $ = layui.$;
				$('#loginForm').submit(function () {
					var form = $(this);
					if (loading) {
						return false;
					}
					loading = true;
					var formData = form.serializeArray()
					var data = {}
					for (var k in formData) {
						if (formData[k]['value'] != '') {
							data[formData[k]['name']] = formData[k]['value']
						}
					}
					layer.load(2);
					$.ajax({
						url: '',
						data: data,
						type: 'post',
						dataType: 'json',
						success: function (data) {
							layer.closeAll('loading');
							loading = false;
							layer.msg(data.msg);
							recode();
							if (data.code == '1') {
								$('#loginForm')[0].reset();
							}
						},
						error: function (xhr, code, resp) {
							// 请求错误回调
							layer.closeAll('loading');
							layer.alert('服务器繁忙，请稍后重试');
							loading = false;
						}
					});

					return false;
				})
			})
		}

		function recode() {
			var url = "<?php echo $container->url->build('/chat/client/captcha'); ?>" + '?r=' + Math.random();
			document.getElementById('verify-img').setAttribute('src', url)
		}
	</script>
</body>

</html>